<template>
  <div>
    {{company}}
    <button @click="update">update</button>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRef, toRefs } from 'vue'
const reactiveObj = reactive({
  userinfo: {
    name: 'jack',
    age: 19
  },
  company: 'itcast',
  salary: 10000
})
// const company = toRef(reactiveObj, 'company')
// const name = toRef(reactiveObj.userinfo, 'name')

const { userinfo, company, salary } = toRefs(reactiveObj)

const update = () => {
  // company.value = '黑马程序员'
  // name.value = 'rose'
  company.value = '黑马程序员'
}
</script>

<style scoped>

</style>
